<template>
  <view>
    <scroll-view :scroll-y="true" class="ticket-list">
      <view v-for="item in tickets" :key="item.id" class="ticket-item">
        <view class="top">
          <view class="left">
            <view class="movie-name">{{ item.movieName }}</view>
            <view class="detail"
              >{{ item.operaName }} · {{ item.date }} {{ item.time }}</view
            >
          </view>
          <view class="right">
            <u-image
              src="@/static/images/code.png"
              width="80rpx"
              height="80rpx"
            ></u-image>
          </view>
        </view>
        <view class="bottom">
          <view>{{ item.code }}</view>
          <view @click="toDetail(item.id)">查看更多 ></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ticketData = require('@/mock/ticket/index.json');
import PAGE from '@/const/page';

export default defineComponent({
  setup() {
    const tickets = ticketData.tickets;
    return {
      tickets,
    };
  },
  methods: {
    toDetail(id: string) {
      console.log('===============' + id);
      uni.navigateTo({
        url: PAGE.PERSONAL_TICKET_DETAIL.PATH + '?id=' + id,
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.ticket-list {
  width: calc(100% - 80rpx);
  height: calc(100vh - 300rpx - 102rpx - 40rpx);
  padding: 40rpx 40rpx 0rpx 40rpx;

  .ticket-item {
    width: 100%;
    height: 262rpx;
    background-image: url('@/static/images/ticket-bg.png');
    background-size: 100% 100%;
    margin-bottom: 40rpx;

    .top {
      width: 100%;
      height: 144rpx;
      padding: 32rpx;
      border-bottom: 2rpx dashed #fff;
      display: flex;
      justify-content: space-between;

      .left {
        .movie-name {
          font-size: 32rpx;
          font-weight: 700;
          color: #fff;
        }
        .detail {
          font-size: 24rpx;
          color: #999;
          margin-top: 14rpx;
        }
      }
    }

    .bottom {
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0rpx 32rpx;

      view {
        &:first-child {
          font-size: 28rpx;
          font-weight: 700;
          color: #f3b637;
          letter-spacing: 0.325rem;
        }

        &:last-child {
          font-size: 28rpx;
          font-weight: 700;
          color: #fff;
        }
      }
    }
  }
}
</style>
